<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #a1 {
        width: 500px;
        height: 200px;
        margin: 0 auto;
        position: relative;
        border: 2px solid #000;
    }
    .a1-1 img {
        width: 200px;
        height: 200px;
        transition: all 1s linear;
        transform: rotateY(0deg);
        z-index: 1;
    }
    .a1-2 {
        width: 200px;
        height: 200px;
        text-align: center;
        line-height: 200px;
        background-color: pink;
        transform: rotateY(180deg);
        transition: all 1s linear;
    }
    .a1-3 {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
    
    #a1:hover .a1-1 img{
        transform: rotateY(180deg);
        z-index: 0;
    }
    #a1:hover .a1-2 {
        transform: rotateY(0deg);
    }
   
</style>
<body>
    <div id="a1">
        <div class="a1-1">
            <img class="a1-3" src="./寇新峰的动画图片/location_bg.jpg" alt="图片">
        </div>
        <div class="a1-2 a1-3">
            图片文字说明
        </div>
    </div>
</body>
</html>